import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    StatusBar,
    Linking,
    ActivityIndicator,
    DeviceEventEmitter,
    TextInput,
} from 'react-native';
import moment from 'moment'
import AndroidModule from 'src/utils/AndroidConnent'
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Constant from '../../utils/Constant'//全局变量
import Header from "../../components/header";
import DatePickerPart from '../../components/Tool/DatePickerPart'
import NoData from "../../utils/NoData";


const screenW = Dimensions.get('window').width;
const isIos = Platform.OS == 'ios';

export default class BankCardManagerPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            recordsList: [],
            isRefresh: false,
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    }

    componentDidMount() {
        this.getBankCardList()
    }

    render() {
        navigation = this.props.navigation
        return (
            <View style={styles.container}>

                <Header navigation={navigation} Title={'银行卡管理'} hideSepLine={true} />

                <View style={styles.container}>
                    {this.renderList()}
                </View>

                {/* {this.renderBottomBox()} */}

            </View>
        );
    }

    renderList() {
        return (
            <View style={{ backgroundColor: '#f9f9f9', flex: 1, }}>
                <View style={{width: '100%', height: 40, paddingHorizontal: 16, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start'}}>
                    <Text style={{fontSize: 14, color: '#ED542E'}}>账户信息修改或添加，请联系平台客服。</Text>
                </View>
                <FlatList
                    data={this.state.recordsList}
                    renderItem={this.renderItemView.bind(this)}
                    extraData={this.state}
                    onEndReachedThreshold={0.2}
                    onRefresh={this.refreshData}
                    refreshing={this.state.isRefresh}
                    ListEmptyComponent={this.renderEmpty.bind(this)}
                />
            </View>
        )
    }

    renderBottomBox() {
        return (
            <View style={[styles.bottomBox, { height: 70 + Constant.bottomHeight }]}>
                <TouchableOpacity
                    style={styles.saveBox}
                    onPress={() => {
                        this.add()
                    }}
                >
                    <Text style={styles.saveText}>添加</Text>
                </TouchableOpacity>
            </View>
        )
    }

    renderItemView({ item, index }) {
        return (
            <TouchableOpacity
                key={index}
                activeOpacity={0.8}
                style={styles.itemContain}
                onPress={() => {
                    navigation.navigate('BankCardAddPage', {
                        bankCardInfo: item.value,
                        completion: () => {
                            navigation.goBack()
                            this.getBankCardList()
                        }
                    })
                }}
            >
                <View style={styles.itemBankNameContain}>
                    <Text>{item.value.accountName}</Text>
                    {
                        item.value.isDefault ?
                            <View style={styles.defaultCardBox}>
                                <Text style={styles.defaultText}>默认</Text>
                            </View>
                            :
                            null
                    }
                </View>
                <Text style={styles.carText}>{item.value.accountBank + ' ' + this.getBankCardTailNumber(item.value.accountNo)}</Text>
                {
                    this.state.recordsList.length - 1 == index ?
                        null
                        :
                        <View style={styles.sepLine} />
                }
            </TouchableOpacity>
        )
    }

    getBankCardTailNumber(cardNumber) {
        if (cardNumber == '')
            return "";
        let bankInfo = "";
        let len = cardNumber.length;
        if (len >= 4) {
            bankInfo = cardNumber.substring(len - 4, len);
        }
        return "尾号" + bankInfo;
    }

    renderEmpty() {
        if (!this.state.isRefresh) {
            return (
                <NoData Desc="暂无数据" style={{ marginTop: gREM(200) }} />
            )
        } else {
            return (
                null
            )
        }
    }

    add() {
        navigation.navigate('BankCardAddPage', {
            completion: () => {
                navigation.goBack()
                this.getBankCardList()
            }
        })
    }

    refreshData = () => {
        this.getBankCardList();
    }

    getBankCardList() {
        this.setState({ isRefresh: true, recordsList: [] })

        let param = {
            merchantId: Constant.userInfo.merchantId,
        }
        HttpUtils.getRequest(HttpUrls.getFinanceInfoList, param)
            .then((result) => {
                let data = result.data
                if (data) {
                    let dataBlob = [];
                    if (data && data != null && data.length > 0) {
                        data.map(function (item, i) {
                            dataBlob.push({
                                key: i,
                                value: item,
                            })
                            i++;
                        });
                        this.setState({
                            recordsList: this.state.recordsList.concat(dataBlob),
                            isRefresh: false,
                        });
                        setTimeout(() => {
                            data = null;
                            dataBlob = null;
                        }, 200);
                    } else {
                        this.setState({
                            isRefresh: false,
                        });
                    }
                } else {
                    this.setState({
                        isRefresh: false,
                    });
                }
            })
            .catch((error) => {
                this.setState({
                    isRefresh: false,
                });
            });
    }

}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        backgroundColor: '#F9F9F9'
    },

    itemContain: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        width: '100%',
        height: 65,
        paddingHorizontal: 16,
        backgroundColor: '#fff',
    },
    itemBankNameContain: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    defaultCardBox: {
        marginLeft: 9,
        width: 30,
        height: 14,
        borderColor: '#ED542E',
        borderWidth: 0.5,
        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center'
    },
    defaultText: {
        color: '#ED542E',
        fontSize: 10
    },
    carText: {
        marginTop: 8,
        color: '#999999',
        fontSize: 12,
    },

    sepLine: {
        position: 'absolute',
        bottom: 0,
        left: 20,
        right: 20,
        width: '100%',
        height: 0.5,
        backgroundColor: '#E4E4E4'
    },
    footer: {
        flexDirection: 'row',
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f6f6f6'
    },
    loadMoreTextStyle: {
        fontSize: 14,
        color: '#999999',
        marginStart: 10,
    },

    bottomBox: {
        backgroundColor: '#fff',
        width: '100%',
        paddingHorizontal: 15,
        flexDirection: 'row',
        paddingTop: 12,
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },
    saveBox: {
        width: '100%',
        height: 46,
        borderRadius: 23,
        backgroundColor: '#FFE000',
        justifyContent: 'center',
        alignItems: 'center'
    },
    saveText: {
        fontSize: 16,
        color: '#333'
    }

})